<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>IPTV</title>
	<link href="vlc.css" rel="stylesheet" name="default" /> 
	<link rel="stylesheet" type="text/css" href="jqueryui/css/jquery-ui-1.7.2.custom.css" />
	<script type="text/javascript" src="jqueryui/js/jquery-1.3.2.min.js"></script>
	<script type="text/javascript" src="jqueryui/js/ui.core.js"></script>
	<script type="text/javascript" src="jqueryui/js/ui.slider.js"></script>
<style>
img{border:0;}
ul,li{list-style:none;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{display:inline-block;}
/*\*/ .clearfix{display:block;} /**/

.wrap1{
	margin-left:0px;
	margin-top:20px;
	width:500px;
	height:auto;
	float:left;
}
.wrap2{
	margin-left:10px;
	margin-top:20px;
	width:80px;
	height:auto;
	float:left;
}
label.volume {
	margin-top:13px;
	margin-left:15px;
	display:block;
	font-size:small;
	float:left;
}
div.drag_cont_btn{
	height:auto;
}

.drag3{ 
	position:relative;
	clear:both;
	float:left;
	width:885px;
	margin-top:10px;
	padding-bottom:5px; 
	border:1px solid #D7D7D7; 
	background:#F1F1F1; 
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	-khtml-border-radius:5px;
}
.drag3 .wrap3 {
	height:105px;
	padding:0 10px;
}
.drag3 .drag_cont3 { 
	position:relative;
	width:865px; 
	height:95px;
	background:#FFF;
	-moz-border-radius:5px;
	-webkit-border-radius:5px; 
	-khtml-border-radius:5px;
	overflow:hidden;
}
.drag3 ul.drag_ul3 { 
	height:95px; 
	width:890px;
	position:absolute;
	padding:0px;
	margin:0px;
	left:0px;
	top:0;
}
.drag3 ul.drag_ul3 li { 
	display:inline; 
	float:left;
	width:75px; 
	height:75px;
	margin:10px 0 0 10px;
}
.drag3 ul.drag_ul3 li a {
	display:block;
}
.drag3 ul.drag_ul3 li a img {
	width:75px;
	height:75px;
}
.drag3 .drag_cont_btn3 {
	width:445px;
	margin:6px auto; 
	position:relative;
	border-bottom:1px solid #D7D7D7; 
	height:auto;
}


</style>
</head>
<body>
    <h1>IPTV</h1>
    <div class="all">
        <div class="plugin">
            <br/>
            <br/>
<OBJECT classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921"
        codebase="http://downloads.videolan.org/pub/videolan/vlc/latest/win32/axvlc.cab#Version=0,8,6,0"
        width="640px"
        height="480px"
        id="vlc"
        events="True" VIEWASTEXT>
<param name="MRL" value="" />
<param name="ShowDisplay" value="True" />
<param name="AutoLoop" value="False" />
<param name="AutoPlay" value="true" />
<param name="Volume" value="50" />
<param name="StartTime" value="0" />
</OBJECT>
        </div>
        <div class="playlist">
            <h2>节目列表</h2>
        </div>

	        <div class="wrap1">
	            <div class="drag_cont_btn" id="btn1">
	            </div>
	        </div>
	        <label class="volume">音量:</label>
	        <div class="wrap2">
	            <div class="drag_cont_btn" id="btn2">
	            </div>
	        </div>
		
		<div id="drag3" class="drag3">
			<div class="wrap3">
				<div class="drag_cont3">
					<ul class="drag_ul3 clearfix" id="box">
						<?php
							$arr=file('snapshotindex');
							$cur=file('curtime');
							$start=trim($arr[0]);
							for($x=1;$x<count($arr);++$x){
								if($x%20!=19)continue;
								$tmp=split(' ',$arr[$x]);
								$tmp[1]=trim($tmp[1]);
								echo '<li><a href="javascript:void(0);" onclick="document.vlc.input.position='.($tmp[0]/10/(float)($cur[0]-$start)).';return false;"><img src="'.$tmp[1].'" /></a></li>';
							}
						?>
					</ul>
				</div>
			</div>
			<div class="drag_cont_btn3"></div>
		</div>
    </div>
</body>
<script type="text/javascript">
$(function() {
	var so = {
		max: 200,
		value: 50,
		slide: function(e, x) {
		    var vlc = document.getElementById("vlc");
		    vlc.audio.volume = x.value;
		}
	};
	$("#btn2").slider(so);
});
$('#vlc').click(function(){
	$('#vlc').video.toggleFullscreen();
});
$(function() {
	var so = {
		max: 1000,
		value: 300,
		slide:function(e,x){
		    var vlc = document.getElementById("vlc");
			vlc.input.position=x.value/1000;
		}
	};
	$("#btn1").slider(so);
});

function init() {
	//获取元素
	var $contain = $(".drag_ul3", $("#drag3"));
	var $items = $("li",  $("#drag3 .drag_ul3") );
	var $dragCont = $(".drag_cont3", $("#drag3"));
	var $button  = $(".drag_cont_btn3", $("#drag3"));
	//给容器设置宽度
	var width = ($items.length * parseInt($items.outerWidth(true))) + 10;
	$contain.css("width", width);	
	// slider将要用到的参数:
	// (1)max:最大值
	// (2)slide:滑动时动态改变容器的left.
	var sliderOpts = {
		max: width - parseInt($dragCont.css("width")),
		value:width - parseInt($dragCont.css("width")),
		slide: function(e, ui) { 
			$contain.css("left", "-" + ui.value + "px");
		}
	};
	//创建slider
	$button.slider(sliderOpts);
	$contain.css("left", "-" + (width - parseInt($dragCont.css("width"))) + "px");
}
init();
function doGo(targetURL)
{
    var vlc = document.getElementById('vlc');
    var options = new Array(":vout-filter=deinterlace", ":deinterlace-mode=linear");
    vlc.playlist.clear();
    //vlc.playlist.add(targetURL, null, options);
    vlc.playlist.add(targetURL);
    vlc.playlist.play();
}
setInterval(function(){
	$('#btn1').slider('option', 'value', vlc.input.position*1000);
},100);

doGo("rtsp://202.120.2.213:8554/tv.ts");
//doGo("tv.ts");

</script>

</html> 
